<div class="dropdown relative" id="commands_dropdown_container">
    <button class="blue-btn-new rounded inline-flex items-center gap-2"
      onclick="$('#commands_dropdown').slideToggle('medium');" data-cy="kwlang_switch_btn">
      <span class="fa fa-language ltr:mr-1 rtl:ml-1"></span>
      <span>{{_('language')}}</span>
      <svg id="keyword_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
      </svg>
    </button>
    <div class="dropdown-menu dropdown-blue z-30 mt-2" id="commands_dropdown" {% if not
      request.args.get('keyword_language') %}style="display: none;" {% endif %}
      _="on mutation of @style
          set arrow to #keyword_arrow
          if *display == 'none'
              remove .rotate-180 from arrow
          else if not arrow.classList.contains('rotate-180')
              add .rotate-180 to arrow
          end">
      <h2 class="px-4 pt-2">{{_('commands')}}</h2>
      <!-- If the current language is non-english and supports keywords: show a two column table -->
      <table class="mx-4 my-2" cellpadding="4">
        <thead>
          <tr class="text-center text-lg">
            <td class="ltr:text-right rtl:text-left pb-2">{{_('english')}}</td>
            <td id="keyword_toggle_container" class="pb-2">
              <label for="keyword_toggle" class="flex flex-row items-center justify-center cursor-pointer"
                data-cy="kwlang_switch_toggle">
                <div class="relative flex w-full">
                    <input id="keyword_toggle" type="checkbox"
                    {% if (g.keyword_lang != "en" and not request.args.get('keyword_language')) or
                    (request.args.get('keyword_language') and request.args.get('keyword_language') != "en") %}checked{% endif %}
                    _="on click hedyApp.toggle_keyword_language(
                    '{{  current_keyword_language().lang }}',
                    {%if (g.keyword_lang != 'en' and not request.args.get('keyword_language')) or
                          (request.args.get('keyword_language') and request.args.get('keyword_language') != 'en') %}'en'
                      {% else %}'{{g.lang}}'
                    {% endif %})"
                    class="sr-only" />
                  <div class="w-8 h-4 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle-circle absolute w-4 h-4 bg-blue-800 rounded-full shadow transition"></div>
                </div>
              </label>
            </td>
            <td class="ltr:text-left rtl:text-right pb-2">{{ current_language().sym }}</td>
          </tr>
        </thead>
        <tbody>
          {% for en_phrase, local_phrase in lang_switch_table.items() %}
          <tr>
            <td class="ltr:text-right rtl:text-left">
              {% for en_key in en_phrase %}
              <code>{{ en_key }}</code>
              {% endfor %}
            </td>
            <td class="text-center">⟷</td>
            <td class="ltr:text-left rtl:text-right">
              {% for local_key in local_phrase %}
              <code>{{ local_key }}</code>
              {% endfor %}
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
    </div>
  </div>
